<template>
  <!-- 面板 -->
  <el-card class="box-card" shadow="never">
    <!-- 筛选区域 start-->
    <el-form ref="form" :model="form" label-width="80px" class="el-col-18 form">
      <label style="width:80px">关键字</label>
      <el-input v-model="form.keyword" style="width:188px" size="small"></el-input>
      <label style="width:80px">状态</label>
      <el-select v-model="form.state" placeholder="请选择" size="small">
        <el-option :value="1" label="启用"></el-option>
        <el-option :value="0" label="禁用"></el-option>
      </el-select>
      <el-button size="small" class="m_left" @click="resetForm">清除</el-button>
      <el-button type="primary" size="small" @click="search">搜索</el-button>
    </el-form>

    <!-- 新增技巧 start -->
    <el-button type="success" size="small" class="el-icon-edit right" @click="add">新增技巧</el-button>

    <!-- 消息提示 start -->
    <el-alert type="info" show-icon :closable="false">
      <span style="font-size:13px">数据一共{{total}}条</span>
    </el-alert>

    <!-- 表单start -->
    <el-table :data="tableData" style="width: 100%" class="table" :row-style="{height: '60px'}">
      <el-table-column prop="id" label="序号" width="80">
      </el-table-column>
      <el-table-column label="文章标题" width="380">
        <template slot-scope="scope">
          {{scope.row.title}}
          <span v-if="scope.row.videoURL" class="el-icon-film" style="color:blue; cursor:pointer"
            @click="openVideo(scope.row.videoURL)"></span>
        </template>
      </el-table-column>
      <el-table-column prop="visits" label="阅读数">
      </el-table-column>
      <el-table-column prop="username" label="录入人">
      </el-table-column>
      <el-table-column label="录入时间">
        <template slot-scope="scope">
          {{scope.row.createTime |formatDate }}
        </template>
      </el-table-column>
      <el-table-column label="状态" width="100">
        <template slot-scope="scope">
          {{formatState(scope.row.state)}}
        </template>
      </el-table-column>
      <el-table-column label="操作" width="190">
        <template slot-scope="scope">
          <div class="button">
            <span @click="preview(scope.row)">预览</span>
            <span v-if="scope.row.state===0" @click="on(scope.row.id)">启用</span>
            <span v-if="scope.row.state===1" @click="off(scope.row.id)">禁用</span>
            <span v-if="scope.row.state===0" @click="update(scope.row)">修改</span>
            <span v-if="scope.row.state===0" @click="del(scope.row.id)">删除</span>
            <span style="cursor:not-allowed; color:#ccc" v-if="scope.row.state===1">修改</span>
            <span style="cursor:not-allowed; color:#ccc" v-if="scope.row.state===1">删除</span>
          </div>
        </template>
      </el-table-column>
    </el-table>

    <!-- 分页 start -->
    <el-pagination background layout="prev, pager, next,sizes,jumper" :total="total" :current-page="page"
      :page-sizes="[5, 10, 20, 50]" @size-change="handleSizeChange" @current-change="ChangePage" class="page">
    </el-pagination>

    <!-- 视频弹框 -->
    <el-dialog title="播放视频" :visible.sync="videoShow" width="50%" :before-close="handleClose" center>
      <video :src="videoURL" style="width:100%" controls autoplay muted></video>
    </el-dialog>
    <!-- 定义添加/修改组件 -->
    <articles-add ref="articlesAdd" @update-load="hList"></articles-add>
    <!-- 定义预览组件 -->
    <articles-preview ref="articlesPreview"></articles-preview>
  </el-card>
</template>

<script>
  // 导入渲染列表、文章状态、删除接口
  import { list, changeState, remove } from '@/api/hmmm/articles'
  // 引入moment处理时间
  import moment from 'moment'
  // 导入子组件
  import ArticlesAdd from '../components/articles-add'
  import ArticlesPreview from '../components/articles-preview'
  import { detail } from '@/api/hmmm/articles'
  export default {
    // 注册组件
    components: {
      ArticlesAdd, ArticlesPreview
    },
    data() {
      return {
        tableData: [], // 存放表格数据
        videoURL: '', // 视频URL
        videoShow: false, // 视频是否显示
        total: 0, // 总条数
        page: 1, // 页码数
        pagesize: 10, // 一页几条
        channels: [],
        edit: true,
        dialogVisible: false, // 弹框是否显示
        sendVal: false,
        form: {
          keyword: '', // 关键字
          state: null // 状态

        },
      }
    },
    methods: {
      // 获取文章列表
      hList() {
        const data = {
          page: this.page,
          pagesize: this.pagesize,
          keyword: this.form.keyword,
          state: this.form.state
        }
        list(data).then((res) => {
          // console.log(res)
          this.tableData = res.data.items
          this.total = res.data.counts
        })
      },
      dialogFromShow() { },
      // 页码数改变时触发的方法
      ChangePage(val) {
        // console.log(val)
        this.page = val
        this.hList()
      },
      // 每页条数改变时触发的方法
      handleSizeChange(val) {
        // console.log(val)
        this.pagesize = val
        this.hList()
        this.page = 1
      },
      // 对应的规则转换
      formatState(obj) {
        const state = {
          1: '已启用',
          0: '已禁用'
        }
        return state[obj]
      },
      // 点击搜索按钮渲染页面
      search() {
        this.hList()
      },
      // 点击清除清除输入框内容
      resetForm() {
        this.form.keyword = ''
        this.form.state = null
        this.hList()
      },
      // 启用按钮
      on(id) {
        const params = {
          id,
          state: 1
        }
        changeState(params).then(res => {
          // console.log(res)
          this.hList()
          //   })
        })
      },
      // 禁用按钮
      off(id) {
        const params = {
          id,
          state: 0
        }
        changeState(params).then(res => {
          // console.log(res)
          this.hList()
          //   })
        })
      },
      // 删除按钮
      del(id) {
        const params = {
          id
        }
        this.$confirm('确定要删除吗?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          remove(params).then(res => {
            // console.log(res)
            this.hList()
          })
          this.$message({
            type: 'success',
            message: '删除成功!'
          })
          // this.hList()
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })
      },
      // 新增文章
      add() {
        const row = {
          id: null,
          title: '',
          articleBody: '',
          videoURL: ''
        }
        this.$refs.articlesAdd.recive(row) // 内容回填显示
        this.$refs.articlesAdd.dialogFromShow()// 控制弹框显示
      },
      // 修改文章
      update(row) {
        this.$refs.articlesAdd.dialogFromShow()
        this.$refs.articlesAdd.recive(row)
      },
      // 预览
      preview(row) {
        this.$refs.articlesPreview.dialogFromShow()
        this.$refs.articlesPreview.getDetail(row)
      },
      // 点击打开视频
      openVideo(videoURL) {
        this.videoURL = videoURL
        this.videoShow = true
      },
      // 弹框关闭前的回调
      handleClose() {
        // console.log('11')
        this.videoShow = false
        this.videoURL = ''
      }
    },
    // 过滤器处理时间
    filters: {
      formatDate: function (time) {
        return moment(time).format('YYYY-MM-DD  hh:mm:ss')
      }
    },
    mounted() {
      this.hList()
    }
  }
</script>

<style scoped lang='less'>
  .box-card {
    width: 97%;
    margin: 20px;
    box-sizing: border-box;
  }

  label {
    font-weight: 700;
    margin-left: 25px;
    margin-right: 15px;
    font-size: 14px;
    color: #606266;
  }

  label:nth-of-type(2) {
    margin-left: 50px;
  }

  .m_left {
    margin-left: 10px;
  }

  .right {
    float: right;
  }

  .form {
    margin-bottom: 20px;
  }

  .table {
    margin-top: 20px;

  }

  .page {
    margin: 20px 0;
    float: right;
  }

  .button {
    cursor: pointer;
    color: #409EFF;

  }

  .button span {
    padding: 0 5px;
  }

  .button span:nth-of-type(1) {
    padding-left: 0;
  }

  .button span:nth-of-type(2) {
    padding-right: 8px;
  }

  .ql-align-center>img {
    width: 100%;
  }
</style>